<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>上传视频</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 导航栏 */
        .navbar {
            background-color: #333;
            color: white;
            padding: 15px 20px;
            text-align: center;
            font-size: 18px;
        }

        /* 主体内容容器 */
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
        }

        /* 上传区域容器 */
        .upload-box-container {
            width: 300px;
            height: 300px;
            border: 2px dashed #999;
            border-radius: 10px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            margin-bottom: 30px;
        }

        /* 已上传样式 */
        .upload-success {
            background-color: #e8f5e9;
            border-color: #81c784;
        }

        .upload-success .upload-title {
            color: #2e7d32;
        }

        /* 上传标题 */
        .upload-title {
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }

        /* 加号图标 */
        .plus-icon {
            font-size: 48px;
            color: #aaa;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* 隐藏文件输入框 */
        .file-input-hidden {
            display: none;
        }

        /* 文件名显示 */
        .file-name {
            margin-top: 10px;
            font-size: 14px;
            color: #4caf50;
            max-width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 按钮区域 */
        .button-group {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-top: 20px;
        }

        .analysis-button,
        .reupload-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .analysis-button {
            background-color: #FF9800;
            color: white;
        }

        .analysis-button:hover {
            background-color: #F57C00;
        }

        .reupload-button {
            background-color: #9e9e9e;
            color: white;
        }

        .reupload-button:hover {
            background-color: #757575;
        }

        /* 底部导航栏 */
        .bottom-nav {
            height: 60px;
            background-color: #333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: white;
            font-size: 16px;
            width: 100%;
        }

        .bottom-nav a {
            color: white;
            text-decoration: none;
            flex: 1;
            text-align: center;
            padding: 10px;
        }

        .bottom-nav a:hover {
            text-decoration: underline;
            background-color: #444;
        }
    </style>
</head>
<body>

<%
    String username = (String) session.getAttribute("username");
    if (username == null) {
        response.sendRedirect("index.jsp");
        return;
    }
%>

<!-- 顶部导航栏 -->
<div class="navbar">欢迎使用洪水信息分析系统</div>

<!-- 主体内容 -->
<div class="content">
    <div class="upload-box-container" id="uploadBox">
        <div class="upload-title" id="uploadTitle">上传视频</div>
        <label for="videoInput" class="plus-icon" id="plusLabel">➕</label>
        <input type="file" id="videoInput" name="videoFile" accept="video/*" class="file-input-hidden">
        <div class="file-name" id="fileNameDisplay" style="display:none;"></div>
    </div>

    <div class="button-group" id="actionButtons" style="display: none;">
        <button class="analysis-button" id="analysisButton" onclick="startAnalysis()">开始分析</button>
        <button class="reupload-button" onclick="reuploadVideo()">重新上传</button>
    </div>
</div>

<!-- 底部导航栏 -->
<div class="bottom-nav">
    <a href="#">首页</a>
    <a href="profile.jsp">个人信息</a>
</div>

<script>
    let uploaded = false;
    let currentFileName = "";

    const videoInput = document.getElementById('videoInput');
    const uploadTitle = document.getElementById('uploadTitle');
    const plusLabel = document.getElementById('plusLabel');
    const actionButtons = document.getElementById('actionButtons');
    const analysisButton = document.getElementById('analysisButton');
    const fileNameDisplay = document.getElementById('fileNameDisplay');

    videoInput.addEventListener('change', function() {
        if (!videoInput.files.length) return;

        const file = videoInput.files[0];
        currentFileName = file.name;
        fileNameDisplay.textContent = currentFileName;
        fileNameDisplay.style.display = 'block';

        uploadTitle.textContent = "正在上传...";
        plusLabel.style.color = "#ccc";
        plusLabel.textContent = "⏳";

        const formData = new FormData();
        formData.append('videoFile', file);
        formData.append('action', 'upload');

        fetch('uploadServlet', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误！状态码: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    uploaded = true;
                    uploadTitle.textContent = "上传完成";
                    plusLabel.style.display = 'none';
                    actionButtons.style.display = 'flex';
                    analysisButton.disabled = false;
                    fileNameDisplay.style.color = '#4caf50';
                } else {
                    throw new Error(data.error || "上传失败");
                }
            })
            .catch(error => {
                console.error('上传失败:', error);
                uploadTitle.textContent = "上传失败";
                plusLabel.textContent = "❌";
                plusLabel.style.color = "#f44336";
                fileNameDisplay.style.color = '#f44336';
                alert('上传失败: ' + error.message);
            });
    });

    function startAnalysis() {
        if (!uploaded) return;

        uploadTitle.textContent = "正在分析...";
        analysisButton.disabled = true;

        const formData = new FormData();
        formData.append('videoFile', videoInput.files[0]);
        formData.append('action', 'analyze');

        fetch('uploadServlet', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`分析请求失败！状态码: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    alert(`视频分析已完成！\n受损建筑: ${data.damaged_building}\n受伤人员: ${data.damaged_person}\n受损树木: ${data.damaged_tree}`);
                    uploadTitle.textContent = "分析完成";
                } else {
                    throw new Error(data.error || "分析失败");
                }
            })
            .catch(error => {
                console.error('分析失败:', error);
                alert('分析失败: ' + error.message);
                uploadTitle.textContent = "分析失败";
            })
            .finally(() => {
                analysisButton.disabled = false;
            });
    }

    function reuploadVideo() {
        uploaded = false;
        uploadTitle.textContent = "上传视频";
        plusLabel.style.display = 'inline-block';
        plusLabel.textContent = "➕";
        plusLabel.style.color = '#aaa';
        actionButtons.style.display = 'none';
        fileNameDisplay.style.display = 'none';
        videoInput.value = "";
    }
</script>

</body>
</html>
